<template>
  <div class="page">
    <!--    顶栏-->
    <div class="header flex-space-between">
      <div class="logoBox flex-align-center">
        <img src="@/assets/images/logo.png" alt="logo" class="logo">
      </div>
      <div class="flex">
        <div v-if="walletAdr" class="adrBox flex-center">{{ textSubstr(walletAdr, 4) || '未连接钱包' }}</div>
        <div v-else @click="init" class="adrBox flex-center">{{ textSubstr(walletAdr, 4) || '未连接钱包' }}</div>
        <div class="standing-title">{{ getUserLevel() }}</div>
      </div>
    </div>
    <!--    banner-->
    <div class="banner">
      <!--      <div class="content">-->
      <!--      </div>-->
    </div>
    <!--    GBT节点私募-->
    <div class="banner-title">
      <img src="../assets/images/title1.png" alt="">
    </div>
    <!--    私募信息-->
    <div class="placement-box">
      <div class="placement">
        <div class="placement-right">
          <div @click="selectType(i)" :class="{'placement-right-active':i.active}" class="placement-right-noactive"
               v-for="(i,k) in periodsShowList" :key="k">
            {{ i.name }}
          </div>
        </div>
      </div>
      <div class="placement">
        <span class="title">赠送福利:</span>
        <span>赠送等值的AVM</span>
      </div>
      <div class="placement">
        <span class="title">产品价格:</span>
        <span>{{ currentType?.money }} USDT</span>
      </div>
    </div>
    <!--    全球付认证-->
    <div class="cardBox flex-space-between" @click="toLink">
      <div class="flex-align-center">
        <img src="@/assets/images/icon-card.png" alt="ic" class="img">
        <div class="label">银行卡认证</div>
      </div>
      <van-icon size="18" color="#ffffff" name="arrow"/>
    </div>


    <!--    参与私募-->
    <div class="placement-btn">
      <div class="btn-box" v-if="walletAdr" @click="submit">购买</div>
      <div class="btn-box" v-else @click="init">连接钱包</div>
      <div class="btn-tip" @click="router.push('/BuyRecord')">
        购买记录 >>
        <!--        <span class="btn-subtip" @click="isNotReachedAccountShow = true">私募支付未到账?</span>-->
      </div>
    </div>
    <!--    邀请好友-->
    <div class="invite-friends">
      <div class="invite-head">
        <img class="to-right" src="../assets/images/to-right.png" alt="">
        <img class="icon-img" src="../assets/images/icon1.png" alt="">
        <span class="head-title">邀请好友</span>
        <img class="to-left" src="../assets/images/to-left.png" alt="">
      </div>
      <div class="content-box">
        <div class="content1">
          <div class="content1-left">
            <span>直推人数:</span>
            <span class="content1-lefttitle">{{ info?.direct_count }}人</span>
          </div>
          <div class="content1-right">
            <span>间推人数:</span>
            <span class="content1-lefttitle">{{ info?.interpenetration_count }}人</span>
          </div>
        </div>
        <div class="content2">
          <div class="content2-left">
            <span>我的奖励:</span>
            <span class="content2-title">{{ Number(info?.user_money).toFixed(1) }} USDT</span>
          </div>
          <div class="content2-right" @click="isWithdrawalIncentiveShow = true">
            领取奖励
          </div>
        </div>
        <div class="content9" @click="toLogView(1)">奖励明细</div>
        <!--        <div class="content3">奖励说明</div>-->
        <!--        <div class="content4">-->
        <!--          推荐用户获得直推{{ info?.direct }}%的奖励, 间推{{ info?.interpenetration }}%的奖励-->
        <!--        </div>-->
        <div class="content5">邀请链接</div>
        <div class="content6">
          {{ baseUrl }}h5?address={{ info?.wallet_address }}
        </div>
        <div class="content7" @click="copyInvite">复制邀请链接</div>
        <div class="content8" @click="toTeamDetail">查看团队>></div>
      </div>
    </div>

    <!--    我的AVM-->
    <div class="my-gbt">
      <div class="mygbt-head">
        <img class="to-right" src="../assets/images/to-right.png" alt="">
        <img class="icon-img" src="../assets/images/icon2.png" alt="">
        <span class="head-title">我的AVM</span>
        <img class="to-left" src="../assets/images/to-left.png" alt="">
      </div>
      <div class="content-box">
        <div class="content1">
          <div class="">我的AVM:
            <span class="content1-subtitle">{{ info?.freeze_gbd + Number(info?.gbd) || 0 }}AVM</span>
          </div>

          <div class="">冻结AVM:
            <span class="content1-subtitle">{{ info?.freeze_gbd || 0 }}AVM</span>
          </div>
        </div>
        <div class="">可提现AVM:
          <span class="content1-subtitle">{{ info?.gbd || 0 }}AVM</span>
        </div>
        <div class="content2">
          <div class="content-noactive" @click="isWithdrawalGBTShow = true">立即提取</div>
          <div class="content-active" @click="isInterconversionShow = true">立即互转</div>
          <div class="content-noactive" @click="isPledgeDescriptionShow = true">立即质押</div>
        </div>
        <div class="content3">锁仓规则</div>
        <div class="content4">
          节点私募币分五次释放 <br>
          上线当天到账20%,剩下的80%分四个月释放 (每30天释放20%)
        </div>
      </div>
    </div>
    <!--    gameFusion-->
    <div class="game-fusion">
      <div class="game-head">
        <img class="to-right" src="../assets/images/to-right.png" alt="">
        <span class="head-title">AVM</span>
        <img class="to-left" src="../assets/images/to-left.png" alt="">
      </div>
      <div class="content-box">
        <div class="content1">
          AVM基于 Apple 公链的消费金融支付积分打通银联、万事达和Visa的国际支付系统
        </div>
        <div class="content2">
          <img src="../assets/images/game1.png" alt="">
        </div>
        <div class="content4">
          AVM (Automated Value Management) 是一项基于 Apple 公链的创新项目，致力于实现消费金融支付、积分打通以及国际支付系统的整合，旨在提供安全可靠的金融服务。同时，AVM
          与Moonbank加密银行合作，覆盖了全球170多个国家，为用户提供便捷的金融解决方案。
        </div>
        <div class="content5">
          <img src="../assets/images/game2.png" alt="">
        </div>
        <div class="content7">
          AVM是未来金融领域的一股重要力量，将在多个方面发挥作用。首先，AVM致力于将消费金融支付系统与全球知名支付网络银联、万事达和Visa打通，实现国际支付的便捷与可靠。无论用户身处世界的哪个角落，他们都能通过AVM在全球各地轻松进行支付和转账，享受高效的金融服务。
        </div>
        <div class="content8">
          <img src="../assets/images/game3.png" alt="">
        </div>
        <div class="content10">
          AVM将借助Apple公链的强大特性，实现安全、透明和快速的交易。Apple公链采用了先进的区块链技术和智能合约，确保交易的真实性和不可篡改性。用户可以放心地使用AVM进行支付和积分管理，而无需担心个人信息的泄露或欺诈行为的发生。
        </div>
        <div class="content12">
          AVM和Moonbank加密银行的合作使其覆盖了全球170多个国家，为用户提供了更广泛的金融服务范围。不论用户身在何处，他们都能在AVM生态系统中安全地管理资金、进行投资和获得贷款等金融活动。这种全球性的金融整合将大幅简化跨境交易，促进国际贸易的繁荣发展。
        </div>
        <div class="content12">
          AVM作为基于 Apple
          公链的消费金融支付积分系统，具有广阔的发展前景。通过打通银联、万事达和Visa等国际支付网络，AVM将为用户提供全球范围内的安全、快速和便捷的支付解决方案。同时与Moonbank加密银行的合作，将为全球用户提供更完善的金融服务体系。AVM的出现将在未来金融领域发挥重要作用，为数字金融时代的发展注入更多创新和活力！
        </div>
      </div>
    </div>

    <!--    提现申请弹窗-->
    <van-popup v-model:show="isWithdrawalIncentiveShow">
      <div class="popup-box">
        <div class="popup-title">提现奖励</div>
        <div class="content1">
          <span class="left-title">提现金额:</span>
          <input v-model="withdrawUSDTnum" type="number">
        </div>
        <div class="content2">
          <span class="inner-title">我的奖励:</span>
          <span class="inner-show">我的奖励: {{ info?.user_money }}USDT</span>
        </div>
        <div class="content3">
          <span class="left-title">提现地址:</span>
          <span class="left-subtitle">{{ info?.wallet_address }}</span>
        </div>
        <div class="content4">
          <span class="left-title">手 续 费:</span>
          <span>1USDT</span>
        </div>
        <div class="popup-btn" @click="withdrawUSDT">立即提现</div>
        <div class="popup-tip" @click="toLogView(2)">查看提现记录>></div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isWithdrawalIncentiveShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

    <!--    质押说明弹窗-->
    <van-popup v-model:show="isPledgeDescriptionShow">
      <div class="pledge-description">
        <div class="description-title">质押说明</div>
        <div class="description-subtitle">节点私募结束后上线质押功能</div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isPledgeDescriptionShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

    <!--    提现GBT申请弹窗-->
    <van-popup v-model:show="isWithdrawalGBTShow">
      <div class="popup-box">
        <div class="popup-title">立即提现</div>
        <div class="content1">
          <span class="left-title">提现金额:</span>
          <input v-model="withdrawGBTnum" type="number">
        </div>
        <div class="content2">
          <span class="inner-title">我的GBT:</span>
          <span class="inner-show">我的AVM: {{ info?.gbd }}AVM</span>
        </div>
        <div class="content3">
          <span class="left-title">提现地址:</span>
          <span class="left-subtitle">{{ info?.wallet_address }}</span>
        </div>
        <div class="content4">
          <span class="left-title">手 续 费:</span>
          <span>0%</span>
        </div>
        <div class="popup-btn" @click="withdrawGBT">立即提现</div>
        <div class="popup-tip" @click="toLogView(2)">查看提现记录>></div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isWithdrawalGBTShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

    <!--    互转申请弹窗-->
    <van-popup v-model:show="isInterconversionShow">
      <div class="interconversion-box">
        <div class="interconversion-title">立即互转</div>
        <div class="interconversion-title1">转账钱包地址:</div>
        <input v-model="interconversionValue" type="text" placeholder="输入钱包地址">
        <div class="interconversion-title2">
          <span class="inner-left">可用额度:</span>
          <span>{{ info?.gbd }} AVM</span>
        </div>
        <div class="interconversion-title1">转账金额:</div>
        <input v-model="interconversionNumValue" type="number" placeholder="输入转账金额">
        <div class="interconversion-title3">
          <span class="inner-left">注释:</span>
          <span>只有自己的网体之间才能进行互转</span>
        </div>
        <div class="interconversion-btn" @click="immediateInterrevolution">立即互转</div>
        <div class="interconversion-tip" @click="toLogView(3)">查看互转记录>></div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isInterconversionShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

    <!--    私募未到账弹窗-->
    <van-popup v-model:show="isNotReachedAccountShow">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">私募未到账</div>
        <div class="notReachedAccount-title1">订单记录哈希值:</div>
        <input v-model="notReachedAccountValue" type="text" placeholder="输入哈希值校验">
        <div class="notReachedAccount-title3">
          <span class="inner-left">提示:</span>
          <span class="inner-right">打开钱包支付记录,复制哈希值输入框中校验支付状态</span>
        </div>
        <div class="notReachedAccount-btn" @click="checkPaymentStatus">校验支付情况</div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isNotReachedAccountShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

    <!--    绑定上级弹窗-->
    <van-popup v-model:show="isBindParentShow" :close-on-click-overlay="false">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">绑定上级</div>
        <div class="notReachedAccount-title1">上级钱包地址:</div>
        <input v-model="bindParentValue" type="text" placeholder="输入上级钱包地址">
        <div class="notReachedAccount-title3">
          <span class="inner-left">提示:</span>
          <span class="inner-right">上级钱包地址绑定之后,不可更改!</span>
        </div>
        <div class="notReachedAccount-btn" @click="checkBindParent">立即绑定</div>
        <!--        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
        <!--             p-id="5988" width="20" height="20" @click="isBindParentShow = false">-->
        <!--          <path-->
        <!--              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"-->
        <!--              fill="#13f6c4" p-id="5989"></path>-->
        <!--        </svg>-->
      </div>
    </van-popup>

    <!--    地址信息-->
    <van-popup v-model:show="showAddrPopup" :close-on-click-overlay="false">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">收实体卡地址</div>
        <div class="notReachedAccount-title1">收货人:</div>
        <input v-model="receiver" type="text" placeholder="名字">
        <div class="notReachedAccount-title1">收货地址:</div>
        <input v-model="addrInfo" type="text" placeholder="省、市、区、街道、楼门、房号">
        <div class="notReachedAccount-title1">联系方式:</div>
        <input v-model="receiptPhone" type="text" placeholder="手机号">

        <div class="notReachedAccount-title3">
          <span class="inner-left">提示:</span>
          <span class="inner-right">购买后不可更改!</span>
        </div>
        <div class="notReachedAccount-btn" @click="buy">提交并立即购买</div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="showAddrPopup = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {textSubstr, sliceDecimal, formatNum} from '@/libs/utlis.js';
import {useEthersStore} from '@/stores/ethers';
import {closeToast, showDialog, showToast, showSuccessToast} from 'vant';
import req from '@/libs/req';
import {copyText} from '@/libs/utlis';

let baseUrl = import.meta.env.VITE_BASE_URL;

const router = useRouter();
const route = useRoute();
const ethers = useEthersStore();
const count = ref(0);
const dateType = ref([
  {
    name: '30天',
    num: 30,
    id: 1,
    active: true,
    double: 1,
  },
  {
    name: '60天',
    num: 60,
    id: 2,
    active: false,
    double: 1.5,

  },
  {
    name: '100天',
    num: 100,
    id: 3,
    active: false,
    double: 2,
  },
]);
const isWithdrawalIncentiveShow = ref(false);
const isPledgeDescriptionShow = ref(false);
const isWithdrawalGBTShow = ref(false);
const isInterconversionShow = ref(false);
const privateEquityQuota = ref(0);
const numberPeriods = ref(1);
const periodsShowList = ref([]);
const interconversionValue = ref(''); // 互转钱包地址
const interconversionNumValue = ref(0); // 互转金额
const isNotReachedAccountShow = ref(false);
const notReachedAccountValue = ref(''); // 校验哈希值
const withdrawGBTnum = ref(0); // 提现GBT金额
const withdrawUSDTnum = ref(0); // 提现USDT金额
const isBindParentShow = ref(false); // 是否展示绑定上级弹窗
const bindParentValue = ref(''); // 上级绑定的钱包地址
const isPrivateValue = ref(false); // 判断用户是否已经私募

// 地址信息
const showAddrPopup = ref(false);
const addrInfo = ref('');
const receiver = ref('');
const receiptPhone = ref('');

const currentType = computed(() => periodsShowList.value.filter(i => i.active)[0]);

// 当前选择的质押时间
const currentDate = computed(() => dateType.value.filter(i => i.active)[0]);
const walletAdr = computed(() => ethers.walletAdr);
const info = computed(() => ethers.info);
const authFlag = computed(() => Number(info.value.authNum) >= Number(count.value));
// 最大数量
const maxCount = computed(() => info.value.num);

// 获取判断用户是否私募
// const getIsBuy = async () => {
//   const res = await req.post('Index/isPrivateLog')
//   if (res.state === 1) return isPrivateValue.value = true;
//   isPrivateValue.value = false;
// }
// 印射用户等级
const getUserLevel = () => {
  let txt;
  switch (info.value?.level) {
    case 0:
      txt = '普通用户';
      break;
    default:
      txt = `V${info.value?.level}`;
      break;
  }
  return txt;
};
// 点击提现USDT
const withdrawUSDT = async () => {
  if (withdrawUSDTnum.value === 0) return showToast('输入金额不能为0,请重新输入!');
  if (withdrawUSDTnum.value > Number(info.value?.user_money)) return showToast('余额不足,请重新输入!');
  const res = await req.post('Index/withdrawal', {
    type: 1,
    money: withdrawUSDTnum.value,
  });
  if (res.code === 1) {
    showSuccessToast(res.msg);
    withdrawUSDTnum.value = 0;
    isWithdrawalIncentiveShow.value = false;
  }
};
// 点击提现GBT
const withdrawGBT = async () => {
  if (withdrawGBTnum.value === 0) return showToast('输入金额不能为0,请重新输入!');
  if (withdrawGBTnum.value > Number(info.value?.gbd)) return showToast('余额不足,请重新输入!');
  const res = await req.post('Index/withdrawal', {
    type: 2,
    money: withdrawGBTnum.value,
  });
  if (res.code === 1) {
    showSuccessToast(res.msg);
    withdrawGBTnum.value = 0;
    isWithdrawalGBTShow.value = false;
  }
};
// 点击校验支付情况
const checkPaymentStatus = async () => {
  if (notReachedAccountValue.value.trim() === '') return showToast('哈希值不能为空,请重新输入!');
  const res = await req.post('Index/payment_callback', {
    txHash: notReachedAccountValue.value,
  });
  if (res.code === 1) {
    showToast(res.msg);
    notReachedAccountValue.value = '';
    isNotReachedAccountShow.value = false;
  }
};
// 点击互转
const immediateInterrevolution = async () => {
  if (interconversionValue.value.trim() === '') return showToast('钱包地址不能为空,请重新输入!');
  if (Number(interconversionNumValue.value) > Number(info.value.gbd)) return showToast('GBT余额不足,请重新输入!');
  const res = await req.post('Index/rotation', {
    to_wallet_address: interconversionValue.value,
    money: interconversionNumValue.value,
  });
  if (res.length === 0) {
    showSuccessToast('转账成功!');
    interconversionValue.value = '';
    interconversionNumValue.value = 0;
    isInterconversionShow.value = false;
    await ethers.getInfo();
  }
};
// 点击复制文本
const copyInvite = () => {
  //if (!info.value.isPrivateValue) return showToast('请先私募后再复制链接!');
  const str = `${baseUrl}h5?address=${info.value?.wallet_address}`;
  copyText(str);
  showSuccessToast('复制成功!');
};
// 点击前往团队
const toTeamDetail = () => {
  router.push('/team');
};
// 点击前往明细
const toLogView = (id) => {
  router.push({
    path: '/log',
    query: {id},
  });
};

// 获取各期数据
const getPeriodsList = async () => {
  const res = await req.post('Index/periodsList2');
  console.log(res, 'getPeriodsList');
  periodsShowList.value.splice(0, periodsShowList.value.length, ...res.map(i => ({
    active: false,
    ...i,
  })));
  periodsShowList.value[0]['active'] = true;
};

// 绑定上级之后登录
const checkBindParent = async () => {
  if (bindParentValue.value.trim() === '') return showToast('钱包地址不能为空,请重新输入!');
  isBindParentShow.value = false;
  await ethers.init(bindParentValue.value);
};

//连接钱包
async function init() {
  const isRegister = await ethers.isUserRegister();
  if (!!isRegister) {
    await ethers.init(bindParentValue.value);
  } else {
    isBindParentShow.value = true;
  }
}

//私募
function submit() {
  try {
    const checkoutNum = currentType.value.money;
    const checkoutId = currentType.value.id;

    if (Number(checkoutNum) > Number(info.value.num)) {
      return showToast('余额不足');
    }

    console.log(currentType.value.status);

    // 填写收货信息
    if (+currentType.value.id === 2) {
      showAddrPopup.value = true;
    } else {
      buy();
    }


  } catch (e) {
    showToast('网络繁忙');
  }
}

function selectType(i) {
  periodsShowList.value.forEach(i => i.active = false);
  i.active = true;
}

async function buy() {
  try {
    const {id, money} = currentType.value;
    if (+id === 2) {
      if (!addrInfo.value || !receiver.value || !receiptPhone.value)
        return showToast('未填写完整');
      else
        showAddrPopup.value = false;
    }

    const toast = showToast({
      type: 'loading', message: '提交中...', overlay: true, forbidClick: true, duration: 0,
    });

    const chainType = ethers.chainInfo.chainId;
    const order = await req.post('Index/setPrivateLog2', {
      periods_id: id,
      type: chainType === 56 ? 1 : 2,
      address: addrInfo.value,
      consignee: receiver.value,
      phone: receiptPhone.value,
    });
    const adr = chainType === 56 ? import.meta.env.VITE_BNCONTRACT : import.meta.env.VITE_APCONTRACT;

    toast.message = '拉起支付...';
    const tx = await ethers.transfer(adr, order.to_wallet_address, money);
    console.log(tx, 'tx');
    toast.message = '确认订单...';
    await req.post('Index/payment_callback2', {
      txHash: tx.hash,
      order_sn: order.order_sn,
    });

    toast.message = '确认区块...';
    await tx.wait();
    closeToast();
    await ethers.getInfo();
    showToast('预计1-5分钟到账');

  } catch (e) {
    closeToast();
    showToast(e?.msg || '网络异常');
  }
}

function toLink(){
  window.open('https://www.cardwiser.asia/#/download')
  // window.open('https://www.globalcash.hk/')
}

onMounted(() => {
  getPeriodsList();

  const href = window.location.href;
  const query = href.split('?')[1];
  const queryArr = query?.split('&');
  if (!queryArr || queryArr.length === 0) return;
  const filterValue = queryArr?.filter(item => item.indexOf('address') !== -1);
  if (filterValue.length === 0) return;
  let address = filterValue[0].split('=')[1];
  if (address.indexOf('#/') !== -1) {
    address = address.split('#/')[0];
  }
  bindParentValue.value = address;
});
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  min-height: 100vh;
  background: #000;
  padding-bottom: 48px;
  overflow-x: hidden;
}

.header {
  padding: 12px 15px;
  background-color: #000;

  .logoBox {
    font-size: 18px;
    font-weight: 500;
    color: #000;

    .logo {
      width: 43px;
      height: 27px;
      margin-right: 4px;
    }
  }

  .adrBox {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 400;
    color: #000;
    background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
    border-radius: 30px;
  }

  .standing-title {
    padding: 5px 14px;
    font-size: 11px;
    color: #000;
    background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
    border-radius: 30px;
    margin-left: 10px;
  }
}

.banner {
  //min-width: 346px;
  min-height: 223px;
  background: url("@/assets/images/banner.png") no-repeat;
  background-size: 100% 100%;
  //background-position: center -50px;

  .content {
    width: 50%;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    padding: 31px 11px 21px;
    line-height: 1.5;
  }
}

.banner-title {
  display: flex;
  align-items: center;
  justify-content: center;
  //transform: translateY(-30px);

  img {
    width: auto;
    height: 29px;
  }
}

.checkout-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 12px;

  .active,
  .no-active {
    width: 48%;
    position: relative;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    border: 1px solid #13F6C4;
    border-radius: 5px;

    .doing {
      position: absolute;
      right: 0;
      bottom: 100%;
      font-size: 12px;
      color: #000;
      padding: 2px 6px;
      border-radius: 3px;
      background-color: #F7AC15;
    }
  }

  .active {
    color: #000;
    background: linear-gradient(-90deg, #A7E8A9 0%, #F1FD88 100%);
  }

  .no-active {
    color: #fff;
    background: #10221D;
  }
}

.placement-box {
  margin: 17px 10px 0 10px;
  background: url("../assets/images/border-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 25px 0 20px 10px;

  .placement {
    margin-bottom: 15px;
    font-size: 15px;
    color: #FBF5F5;
    display: flex;
    align-items: center;

    .title {
      margin-right: 10px;
      margin-left: 20px;
    }

    .level {
      position: relative;

      svg {
        position: absolute;
        right: -15px;
        top: -10%;
      }
    }

    .placement-right {
      display: flex;
      align-items: center;

      .placement-right-active,
      .placement-right-noactive {
        font-size: 12px;
        padding: 5px 7px;
        border-radius: 30px;
        margin-right: 6px;
      }

      .placement-right-active {
        color: #000 !important;
        background: linear-gradient(90deg, #EBFC8C 0%, #ACEAA7 100%) !important;
        border: 0 !important;
      }

      .placement-right-noactive {
        color: #FBF5F5;
        background: #10221D;
        border: 1px solid #13F6C4;
      }
    }
  }
}

.placement-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .btn-box {
    font-size: 17px;
    text-align: center;
    color: #000;
    padding: 15px 0;
    margin: 18px 37px 11px;
    background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
    border-radius: 30px;
  }

  .btn-tip {
    font-size: 14px;
    color: #E0E0E0;
    text-align: center;
  }

  .btn-subtip {
    text-decoration: underline;
  }
}

.invite-friends {
  margin-top: 37px;

  .invite-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 21px;

    .to-right,
    .to-left {
      height: 13px;
      width: auto;
    }

    .head-title {
      font-size: 23px;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 11px;
    }

    .icon-img {
      width: 24px;
      height: auto;
      margin: 0 7px 0 11px;
    }
  }

  .content-box {
    background: #10221D;
    border: 1px dashed #13F6C4;
    font-size: 14px;
    color: #FBF5F5;
    padding: 25px 12px 15px;
    margin: 0 15px;

    .content1 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content1-lefttitle {
        margin-left: 10px;
      }
    }

    .content2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 17px 0 13px 0;

      .content2-title {
        margin: 0 13px 0 10px;
      }


      .content2-right {
        font-size: 12px;
        color: #000;
        padding: 5px 7px;
        background: linear-gradient(270deg, #EBFC8C 0%, #ACEAA7 100%);
        border-radius: 30px;
      }
    }

    .content9 {
      display: inline-block;
      font-size: 12px;
      padding: 2px 7px;
      border: 1px solid #FBF5F5;
      border-radius: 30px;
      margin-bottom: 10px;
    }

    .content3 {
      margin-bottom: 13px;
    }

    .content4,
    .content6 {
      padding: 18px 10px;
      color: #F7AC15;
      border-radius: 5px;
      background-color: #000;
    }

    .content6 {
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏超出容器的部分 */
      text-overflow: ellipsis; /* 使用省略号来表示被截断的文本 */
    }

    .content5 {
      margin: 12px 0 13px 0;
    }

    .content7 {
      font-size: 17px;
      color: #000;
      padding: 13px 0;
      margin: 17px 23px 13px;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
    }

    .content8 {
      text-align: center;
    }
  }
}

.my-gbt {
  margin-top: 36px;

  .mygbt-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 21px;

    .to-right,
    .to-left {
      height: 13px;
      width: auto;
    }

    .head-title {
      font-size: 23px;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 11px;
    }

    .icon-img {
      width: 24px;
      height: auto;
      margin: 0 7px 0 11px;
    }
  }

  .content-box {
    background: #10221D;
    border: 1px dashed #13F6C4;
    font-size: 14px;
    color: #FBF5F5;
    padding: 25px 12px 34px;
    margin: 0 15px;

    .content1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;

    }

    .content1-subtitle {
      margin-left: 8px;
      font-size: 12px;
    }

    .content2 {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 20px 0 30px;

      .content-noactive,
      .content-active {
        font-size: 12px;
        padding: 8px 15px;
        border-radius: 30px;
      }

      .content-noactive {
        color: #fff;
        background: #7A7A7A;
      }

      .content-active {
        color: #000;
        background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
      }
    }

    .content3 {
      margin-bottom: 13px;
    }

    .content4 {
      padding: 17px 13px;
      color: #F7AC15;
      line-height: 24px;
      background-color: #000;
      border-radius: 5px;
    }
  }
}

.pledge-description {
  width: 90vw;
  position: relative;
  padding: 29px 0 50px;

  svg {
    position: absolute;
    top: 12px;
    right: 15px;
  }

  .description-title {
    font-size: 18px;
    color: #f6f6f6;
    text-align: center;
  }

  .description-subtitle {
    font-size: 15px;
    color: #f6f6f6;
    text-align: center;
    margin-top: 40px;
  }
}

.interconversion-box {
  width: 90vw;
  position: relative;
  padding: 28px 23px 33px;
  font-size: 15px;
  color: #f6f6f6;

  svg {
    position: absolute;
    top: 12px;
    right: 15px;
  }

  .interconversion-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 47px;
  }

  input {
    width: 100%;
    padding: 13px 12px;
    border: none;
    font-size: 12px;
    color: #ababab;
    background: #454545;
    border-radius: 5px;
    margin: 13px 0 19px;
  }

  .interconversion-title2 {
    display: flex;
    align-items: center;
  }

  .interconversion-title3 {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #F7AC15;
    margin: 24px 0 30px;
  }

  .interconversion-btn {
    font-size: 17px;
    color: #000;
    padding: 16px 0;
    text-align: center;
    background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
    border-radius: 30px;
    margin-bottom: 22px;
  }

  .interconversion-tip {
    font-size: 12px;
    color: #F7AC15;
    text-align: center;
  }

  .inner-left {
    margin-right: 10px;
  }
}

.notReachedAccount-box {
  width: 90vw;
  position: relative;
  padding: 28px 23px 33px;
  font-size: 15px;
  color: #f6f6f6;

  svg {
    position: absolute;
    top: 12px;
    right: 15px;
  }

  .notReachedAccount-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 47px;
  }

  input {
    width: 100%;
    padding: 13px 12px;
    border: none;
    font-size: 12px;
    color: #ababab;
    background: #454545;
    border-radius: 5px;
    margin: 13px 0 19px;
  }

  .notReachedAccount-title3 {
    display: flex;
    font-size: 12px;
    color: #F7AC15;
    margin: 24px 0 30px;

    .inner-left {
      margin-right: 10px;
    }

    .inner-right {
      flex: 1;
    }
  }

  .notReachedAccount-btn {
    font-size: 17px;
    color: #000;
    padding: 16px 0;
    text-align: center;
    background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
    border-radius: 30px;
    margin-bottom: 22px;
  }

  .notReachedAccount-tip {
    font-size: 12px;
    color: #F7AC15;
    text-align: center;
  }

}

.game-fusion {
  margin-top: 38px;

  .game-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 21px;

    .to-right,
    .to-left {
      height: 13px;
      width: auto;
    }

    .head-title {
      font-size: 23px;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 8px;
    }
  }

  .content-box {
    background: #10221D;
    border: 1px solid #13F6C4;
    font-size: 13px;
    color: #FBF5F5;
    padding: 25px 12px 19px;
    margin: 0 15px;

    img {
      width: 100%;
      height: 100%;
      margin: 17px 0 18px 0;
    }

    .content1,
    .content4,
    .content7,
    .content10,
    .content12 {
      line-height: 24px;
    }

    .content3,
    .content6,
    .content9,
    .content11 {
      font-size: 14px;
      color: #F7AC15;
      margin-bottom: 13px;
    }

    .content11 {
      margin-top: 15px;
    }
  }
}

.popup-box {
  position: relative;
  font-size: 15px;
  color: #f6f6f6;
  padding: 28px 25px 33px;

  svg {
    position: absolute;
    top: 12px;
    right: 15px;
  }

  .left-title {
    margin-right: 10px;
  }

  .inner-title {
    opacity: 0;
  }

  .popup-title {
    font-size: 18px;
    color: #f6f6f6;
    text-align: center;
    margin-bottom: 39px;
  }

  .content1 {
    display: flex;
    align-items: center;

    .left-title {
    }

    input {
      flex: 1;
      width: 100%;
      padding: 10px 12px;
      border-radius: 5px;
      border: none;
      background-color: #454545;
    }
  }

  .content2 {
    display: flex;
    align-items: center;
    margin: 4px 0 28px;

    .inner-show {
      margin-left: 10px;
      font-size: 12px;
      color: #F7AC15;
    }
  }

  .content3 {
    display: flex;
    flex-direction: column;

    .left-subtitle {
      font-size: 12px;
      margin-top: 13px;
    }
  }

  .content4 {
    margin: 16px 0 30px;
  }

  .popup-btn {
    font-size: 17px;
    color: #000;
    padding: 12px 0;
    background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
    border-radius: 30px;
    text-align: center;
    margin-bottom: 22px;
  }

  .popup-tip {
    font-size: 12px;
    color: #F7AC15;
    text-align: center;
  }
}

:deep(.van-popup--center) {
  background: #000000;
  border: 1px solid #13F6C4;
  border-radius: 10px;
}

.cardBox {
  margin: 12px 24px;

  .img {
    width: 38px;
    margin-right: 12px;
  }

  .label {
    color: #FFFFFF;
    font-size: 14px;
  }
}
</style>
